<template>
  <div id="topbar">
    <div class="wrap">
      <div class="left">欢迎来到叩丁狼网络商城</div>
      <div class="right">
        <ul>
          <li @click="hdclick">
            <img src="@/assets/img/userImg.f8bbec5e.png" alt="">
            用户名：谭锡禧</li>
          <li>我的积分：250</li>
          <li>获取积分</li>
          <li>叩丁狼官网</li>
          <li class="login-Btn" @click="chanIsShowLoginModal(true)">登录</li>
          <li class="gouwuche">
            <img src="@/assets/img/cart.png" alt="">
            <span>购物车</span>
            <b>{{ carTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
  name:'Topbar',
  data() {
    return {
      carTotal:0
    };
  },

  mounted() {},

  methods: {
    ...mapMutations({
      // 拿到模块文件夹showLoginModal，的方法名changIsShowLoginModal
      chanIsShowLoginModal:"showLoginModal/chanIsShowLoginModal",
      chanIsShowToast:"showToast/chanIsShowToast"
    }),
    hdclick(){
      this.chanIsShowToast({
        py:"尚未登陆!",
        type:"warning"
      })
    }
  },
};
</script>

<style lang="less">
@import "@/assets/global.less";
#topbar {
  height: 42px;
  background-color: #242b39;
  color: beige;
  line-height: 42px;
  .wrap {
    height: 42px;
    display: flex;
    // 两端对齐
    justify-content: space-between;
    .right ul{
      display: flex;
      list-style: none;
      li{
        border-radius: 50%;
        // 等高居中
        display: table;
        margin-left: 19px;
        font-size: 14px;
        cursor: pointer;
        img{
          width: 26px;
            height: 26px;
            border-radius: 50%;
            vertical-align:middle;
        }
        &.login-Btn{
          width: 130px;
            height: 42px;
            text-align: center;
            // 从公共样式引入
            background:@base-color;
            border-radius: 0%;
        }
        &.gouwuche{
           width: 130px;
           height: 42px;
           background:@base-color;
           border-radius: 0%;
           text-align: center;
           img{
            width: 20px;
            height: 20px;
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 0%;
           }
           b{
              height: 20px;
              width: 20px;
              display: inline-block;
              background-color: #fd604d;
              border-radius: 11px;
              text-align: center;
              line-height: 20px;
              margin-left: 5px;
            }
        }
        // 这里它会继承，所以要用border-radius: 0%还原方形
      }
    }
  }
}
</style>